<template>
  <div class="search-area">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-input-search 
          placeholder="输入教师姓名" 
          @search="$emit('search', $event)" 
        />
      </a-col>
      <a-col :span="6">
        <a-select
          placeholder="选择学院"
          style="width: 100%"
          v-model="selectedCollege"
        >
          <a-select-option value="all">全部学院</a-select-option>
          <a-select-option value="computer">信息工程系</a-select-option>
          <a-select-option value="math">机电工程系</a-select-option>
          <a-select-option value="physics">建筑工程系</a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        <a-select
          placeholder="选择课程"
          style="width: 100%"
          v-model="selectedCourse"
        >
          <a-select-option value="all">全部课程</a-select-option>
          <a-select-option value="java">Java程序设计</a-select-option>
          <a-select-option value="database">数据库原理</a-select-option>
          <a-select-option value="algorithm">算法设计</a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        <a-button type="primary" @click="handleReset">重置</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCollege: undefined,
      selectedCourse: undefined
    }
  },
  
  methods: {
    handleReset() {
      this.selectedCollege = undefined;
      this.selectedCourse = undefined;
      this.$emit('reset');
    }
  }
}
</script>

<style scoped>
.search-area {
  margin-bottom: 20px;
}
</style>